<template>
  <!-- -->
  <!-- <el-form ref="productFormRef" :model="productForm" :rules="productFormRules" label-width="80px">
  </el-form>   -->
  <!-- class="el-form--inline" -->
  <div>
    
<el-form-item label="商品简述" prop="shortDescription">
  <el-input v-model="model.shortDescription" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="商品详情" prop="fullDescription">
  <div class="desc">
    <editor v-model="model.fullDescription" :min-height="192" 
    :uploadUrl="uploadPictureUrl"
    v-on:onUploadSuccess="onUploadSuccess">
    <!-- v-on:on-upload-success="onUploadSuccess" -->
    </editor>
  </div>
</el-form-item>
  </div>

</template>
  
<script>
import Editor from '@/components/Editor';

export default {
    name: 'ProductDescription',
    components: { Editor },
    props:{
      model: Object,
      rules: Object

    },
    data () {
      return {
        pictureType: 1,
        // 上架标志字典
        publishedOptions: [],
        // 删除标志字典
        deletedOptions: []
        
      }
    },
    computed: {
      uploadPictureUrl () {
        return this.pictureType 
          ? (process.env.VUE_APP_BASE_API + "/common/upload/" + this.pictureType)
          : (process.env.VUE_APP_BASE_API + "/common/upload")
      }
    },
    watch: {
      
    },
    methods: {
      handleEdit () {
        return;
      },
      onSubmit() {
        // console.log('submit!');
      },
      onUploadSuccess (res, file){
        console.log('图片详情页面图片上传res:', res)
        console.log('图片详情页面file:', file)
      }
    },
    mounted () {
      // console.log('ProductDescription mounted')
    },
    created () {
      // console.log('ProductDescription created')
    },
    activated() {
      // console.log('ProductDescription activated')
    },
    deactivated() {
      // console.log('ProductDescription deactivated')
    },
    destroyed() {
      // console.log('ProductDescription destroyed')
    }
}
</script>
  
  <style scoped>
  /* .el-form--inline .el-form-item .el-form-item__label{
    width: 80px;
  } */
.desc { vertical-align: bottom; margin-top: 36px;}
/deep/ .ql-toolbar.ql-snow { 
  border-top-left-radius: .3em;
  border-top-right-radius: .3em;
}
/deep/ .editor.ql-container.ql-snow {
  border-bottom-right-radius: .3em;
  border-bottom-left-radius: .3em;
}
</style>